<template>
    <div class="box">
        <h1 style="text-align: center;">权限列表</h1>
        <br>
        <router-link to="/auth/add">
            <el-button type="primary" v-permission="{ path: '/auth/add', name: '权限添加' }">添加</el-button>
        </router-link>

        <el-table :data="auths.data" style="width: 100%;margin-bottom: 20px;" row-key="_id" border height="600"
            :tree-props="{ children: 'children' }">
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="path" label="路径">
            </el-table-column>
            <el-table-column prop="icon" label="图标">
            </el-table-column>
            <el-table-column label="是否展示">
                <template #default="scope">
                    <el-switch @change="onChange(scope.row._id)" v-model="scope.row.isShow" active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                        v-permission="{ path: '/auth/edit', name: '权限修改' }">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
                        v-permission="{ path: '/user/del', name: '权限删除' }">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 权限编辑 -->
        <el-dialog title="权限编辑" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="权限名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="父权限">
                    <el-select v-model="form.parentId" placeholder="请选择父级">
                        <el-option label="无父级" value="0"></el-option>
                        <el-option v-for="auth in auths" :key="auth._id" :label="auth.name" :value="auth._id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限路径">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="权限图标">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-switch v-model="form.isShow"></el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup>
import { authList, changeShowStatus, authEdit, authDel } from '@/request';
import permission from '@/utils/permission'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
const vPermission = permission

let dialogVisible = ref(false)
let auths = reactive({
    data: []
})
let form = reactive({
    name: '',
    path: '',
    parentId: '',
    icon: '',
    isShow: false,
})


let getAuthList = async () => {
    let data = await authList()
    console.log(data);
    if (data.error_code === 200) {
        auths.data = data.data.authlist
        console.log(auths.data);
    }
}
let onChange = async (id) => {
    let data = await changeShowStatus(id)
    if (data.error_code === 200) {
        ElMessage({
            message: data.msg,
            duration: 1500,
            type: 'success'
        })
    } else {
        ElMessage({
            message: data.msg,
            duration: 1500,
            type: 'error'
        })
    }
}
let handleEdit = (index, row) => {
    dialogVisible.value = true
    for (let key in row) {
        form[key] = row[key]
    }
}
let handleDelete = (index, row) => {
    ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        authDel(row._id).then(data => {
            if (data.error_code === 200) {
                auths.data.splice(index, 1)
                ElMessage({
                    type: 'success',
                    message: data.msg,
                    onClose: () => {
                        getAuthList()
                    }
                });
            } else {
                ElMessage({
                    type: 'error',
                    message: data.msg
                });
            }
        })
    })
}
let edit = async () => {
    let data = JSON.parse(JSON.stringify(form))
    delete data.children
    let res = await authEdit(data)
    let { msg, error_code } = res
    if (error_code === 200) {
        ElMessage({
            message: msg,
            duration: 1500,
            type: 'success',
            onClose: () => {
                dialogVisible.value = false
            }
        })
    } else {
        ElMessage({
            message: msg,
            duration: 1500,
            type: 'error'
        })
    }
}

getAuthList()


</script>

<style lang="scss" scoped>
.el-table,
.box {
    height: 88% !important
}
</style>
